<template>
	<!-- 修改密码 -->
	<view class="change-pass">
		<view class="pd32">
			<view class="ch-title">修改密码</view>
			<view class="ch-tips">请先输入你的旧密码再输入新密码</view>

			<u--form labelPosition="left" labelWidth="90" :model="passwordInfo" :rules="rules" ref="uForm">
				<u-form-item label="原密码" prop="oldPassword" borderBottom>
					<u-input border="none" type="text" v-model="passwordInfo.oldPassword" placeholder="请输入原密码" />
				</u-form-item>
				<u-form-item label="新密码" prop="newPassword" borderBottom>
					<u-input border="none" type="text" v-model="passwordInfo.newPassword" placeholder="请输入新密码" />
				</u-form-item>
				<u-form-item label="确认密码" prop="newPasswordSecond" borderBottom>
					<u-input border="none" type="text" v-model="passwordInfo.newPasswordSecond"
						placeholder="请再次输入新密码" />
				</u-form-item>
			</u--form>


		</view>
		<view class="btn-box">
			<button class="btn" @click="modifyInfo">保 存</button>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				passwordInfo: {
					oldPassword: "",
					newPassword: "",
					newPasswordSecond: "",

				},
				rules: {
					oldPassword: [{
						required: true,
						message: '请输入旧密码',
						trigger: ['blur']
					}],
					newPassword: [{
						required: true,
						message: '请输入新密码',
						trigger: ['blur']
					}],
					newPasswordSecond: [{
						required: true,
						message: '请再次输入新密码',
						trigger: ['blur']
					}, {
						validator: (rule, value, callback) => {
							return value == this.passwordInfo.newPassword
						},
						message: '两次密码不一致',
						trigger: ['blur', 'change']
					}],

				},
			}
		},
		onReady() {
			//如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则。
			this.$refs.uForm.setRules(this.rules)
		},
		created() {},
		methods: {

			// 保存按钮
			async modifyInfo() {
				this.$refs.uForm.validate().then(async res => {
					// uni.$u.toast('校验通过')
					const res1 = await this.$api.updatePassword(this.passwordInfo);
					const {
						data
					} = res1
					console.log(res1, '修改成功');
					if (data == "true") {
						uni.showToast({
							title: '保存成功',
							icon: 'success'
						})
						setTimeout(() => {
							uni.reLaunch({
								url: '/pages/tabbar/login'
							});
						}, 2000);
					}
				}).catch(errors => {
					// uni.$u.toast('校验失败')
				})
			}
		},

	}
</script>

<style lang="scss" scoped>
	.pd32 {
		padding: 0 32rpx;
		box-sizing: border-box;
	}

	.ch-title {
		font-family: PingFang SC, PingFang SC;
		font-weight: bold;
		font-size: 32rpx;
		color: #040515;
		line-height: 38rpx;
		padding: 70rpx 0 0;
		margin: 0rpx 0 16rpx;
	}

	.ch-tips {
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 24rpx;
		color: #73757F;
		line-height: 28rpx;
		margin-bottom: 24rpx;
	}

	.box {
		padding: 30rpx 0rpx;
		border-bottom: 1rpx solid #F0F1F5;
		border-radius: 10rpx;
		font-size: 26rpx;

		.ce {
			color: #909299;
		}

		.fs30 {
			font-size: 30rpx;
		}

		.icon {
			width: 30rpx;
			height: 30rpx;
		}

		.icon-back {
			width: 20rpx;
			height: 20rpx;
			margin-left: 8rpx;
		}

		.headImg {
			width: 80rpx;
			height: 80rpx;
			border-radius: 50%;
		}

		input {
			// text-align: right;
		}

	}

	.up-box {
		display: flex;
		align-items: center;
		height: 80rpx;

		::v-deep .u-upload__button {
			margin: 0;
		}
	}



	.w300 {
		width: 180rpx;
	}

	/deep/.u-form-item__body.data-v-067e4733 {
		padding: 40rpx 0 32rpx;
	}
</style>